<template>
    <div class="container1">
        <el-form ref="form" :model="formUser" label-width="80px" :rules = rules>
            <el-form-item label="姓名" prop="userName" required>
                <el-input v-model="formUser.userName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话"  prop="tel" required>
                <el-input v-model="formUser.tel" :maxlength="11" @blur="isPhone"></el-input>
            </el-form-item>
            <el-form-item label="身份证号"  prop="identityCardNumber" required>
                <el-input v-model="formUser.identityCardNumber" :maxlength="23"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" required>
                <el-input type="password" v-model="formUser.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2" required>
                <el-input type="password" v-model="formUser.password2"></el-input>
            </el-form-item>
            <el-form-item label="类型选择" required>
                <el-select v-model="formUser.mark" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="Register" :disabled="watchpassword">立即创建</el-button>
                <el-button @click="cancelRegister('form')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { requestRegister } from '../../../api';

    export default {
        name: 'staffRegister',
        data() {
            return {
                formUser: {
                    userName: "",
                    tel: "",
                    identityCardNumber: "",
                    password: "",
                    password2: "",
                },
                param: {
                    username: '',
                    password: '',
                    identityCardNumber:'',
                    tel:''
                },
                options: [{
                    value: '2',
                    label: '员工'
                }, {
                    value: '1',
                    label: '管理员'
                }],
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    identityCardNumber:[
                        { required: true, message: '请填写证件号码', trigger: 'blur' },
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                            message: '证件号码格式有误！',
                            trigger: 'blur'
                        }
                    ],
                    tel:[
                        { min: 11, max: 11, message: '输入11位电话号码', trigger: 'blur' },
                        {
                            required: true,
                            message: '请输入手机号',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
                            message: '手机号无效',
                            trigger: 'blur'
                        }
                    ],
                },
                phone: false,
                serve:''
            }
        },
        mounted(){

        },
        computed:{
            watchpassword(){
                if(this.formUser.password === this.formUser.password2 && this.formUser.password !== '' && this.formUser.tel !== '' && this.formUser.userName !== '' && this.formUser.identityCardNumber !== ''){
                    return false;
                }
                else {
                    return true;
                }
            }
        },
        methods:{
            async isPhone(){
                var value = this.formUser.tel
                var pattern = /^1[34578]\d{9}$/
                if(value!=""&&pattern.test(value)){
                    this.phone = true;
                }
                else {this.phone = false}
            },
            async Register(){
                if(this.formUser.mark === 1){
                    this.serve = '主管';
                }else{
                    this.serve = '';
                }
                let json1 = {tel:this.formUser.tel,userName:this.formUser.userName,password: this.formUser.password,identityCardNumber:this.formUser.identityCardNumber,mark:this.formUser.mark,serve:this.serve};
                const res = await requestRegister(json1).catch(() => {
                    return "errorCnn";
                });
                if (res != "errorCnn") {
                    if (res == "duplicate") {
                        this.$message({
                            message: "一个手机号仅限一个用户！",
                            type: "warning"
                        });
                        return;
                    } else if (res == "error") {
                        this.$message({
                            message: "服务器内部错误！",
                            type: "warning"
                        });
                        return;
                    }
                    this.$message({
                        message: "添加用户成功！",
                        type: "success"
                    });
                    this.$emit("closeRegister")
                }
                this.formUser = {}
            },
            cancelRegister(formName){
                //location.reload();
                this.$refs[formName].resetFields();
            }
        }
    };
</script>

<style scoped>
    .container1 {
        padding-top: 30px;
        padding-left: 350px;
        padding-right: 400px;
        padding-bottom: 30px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>